<template>
	<view>
		<view class="head">
			<view class="">
				支付成功，请您前往指定门店消费
			</view>
			<view class="shop">
				<view class="">
					<uni-icons type="shop" size="30" color="#fff"></uni-icons>
				</view>
				<view class="address">
					<view>伟业汽车没人厂（人民路店）</view>
					<view>山阳区人民中路32号</view>
				</view>
				<uni-icons type="paperplane-filled" size="30" color="#fff"></uni-icons>
			</view>
		</view>

		<view class="contain">
			<view class="title">
				订单详情
			</view>
			<view class="card">
				<view class="Item">
					<view>
						车辆精洗
					</view>
					<view>
						￥199
					</view>
				</view>
				<view class="Item">
					<view>
						车辆精洗
					</view>
					<view>
						￥199
					</view>
				</view>
			</view>

			<view class="card">
				<view class="Item">
					<view>
						原价
					</view>
					<view>
						￥100
					</view>
				</view>

				<view class="Item money">
					<view>
						优惠
					</view>
					<view class="youhui">
						-￥10
					</view>
				</view>
				<view class="Item">
					<view>
						优惠券
					</view>
					<view>
						-￥20
					</view>
				</view>
			</view>


			<view class="card">
				<view class="Item">
					<view>
						支付金额
					</view>
					<view class="totalPrice">
						￥90
					</view>
				</view>
			</view>
			<view class="title">
				订单信息
			</view>
			<view class="card orderInfo">
				<view class="Item">
					<view>
						订单号：
					</view>
					<view>
						121212112487878
					</view>
				</view>
				<view class="Item">
					<view>
						下单时间：
					</view>
					<view>
						2020.01.08. 17:40
					</view>
				</view>
				<view class="Item">
					<view>
						车辆：
					</view>
					<view>
						奔驰FWE4/豫A98FHJ 
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.head {
		padding-left: 20px;
		padding-right: 28px;
		padding-top: 18px;
		padding-bottom: 13px;
		background-color: #1D6FFF;
		color: #fff;
	}

	.head>view:nth-child(1) {
		font-size: 18px;
	}

	.shop {
		display: flex;
		justify-content: space-between;
		margin-top: 18px;
	}

	.address {
		margin-left: -40px;
	}

	.address>view:nth-child(1) {
		font-weight: bold;
	}

	.contain {
		margin-top: 12px;
		padding-bottom: 30px;
	}

	.title {
		margin-left: 20px;
		font-size: 18px;
		height: 25px;
		line-height: 25px;
		margin-bottom: 5px;
	}

	.card {
		width: 313px;
		border-radius: 5px;
		box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
		margin: auto;
		padding-left: 15px;
		padding-right: 20px;
		margin-bottom: 20px;
	} 

	.Item {
		display: flex;
		justify-content: space-between;
		height: 46px;
		line-height: 46px;
	}

	.Item>view:nth-child(1) {
		font-weight: bold;
	}

	.youhui {
		color: #FF2525;
	}

	.money {
		border-bottom: 2px solid #B8B9B9;
	}
	.totalPrice{
		font-size: 18px;
		color: #3DBD78;
	}
	.orderInfo{
		margin-bottom: 30px;
	}
</style>